<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>product detail</title>
    <script src="/js/axios.min.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #container {
            width: 1090px;
            margin: auto;
            background: #ffe;
            /*height: 1000px;*/
        }

        #left,
        #right {
            float: left;
            height: 530px;
        }

        #left {
            width: 430px;
            margin-right: 40px;
        }

        #right {
            width: 620px;
        }

        .picture {
            width: 430px;
            height: 430px;
        }

        .pictures {
            width: 76px;
            height: 76px;
            display: inline-block;
            float: left;
            border: 1px solid #ddd;
            margin-right: 10px;
        }

        #pictures-wrapper {
            margin: 18px -10px 0 0;
        }

        h2 {
            font-size: 20px;
            color: #333;
        }

        p {
            color: #999;
            margin: 10px 0 20px;
        }

        #info {
            background: #f5f3ef;
            border-top: 1px dotted #dedede;
            border-bottom: 1px dotted #dedede;
            padding: 20px 10px;
        }

        #price {
            color: red;
            font-size: 1.8em;
            margin-left: 35px;
            font-weight: bolder;
        }

        #price::before {
            content: '￥';
            font-size: .5em;
            color: red;
            font-weight: bolder;
        }

        #item-description,
        #description {
            display: inline-block;
            float: left;
        }

        #description {
            margin-left: 40px;
            width: 500px;
        }

        #description-wrapper {
            margin-top: 20px;
        }

        .clear {
            clear: both;
        }

        textarea {
            width: 100%;
            min-width: 100%;
            max-width: 100%;
            height: 150px;
            margin: 50px 0 20px;
        }

        /*    comment 区域*/
        .member,
        .comment {
            float: left;
        }

        .member {
            width: 80px;
            padding: 0 20px;
        }

        .comment {
            width: 830px;
        }

        .title {
            font-size: .8em;

        }

        .content {
            color: #333333;
        }

        .comment img {
            width: 200px;
            border: 1px solid #dddddd;
        }

        .time {
            font-size: .8em;
        }

        .member img {
            width: 80px;
        }

    </style>
</head>
<body>
<!-- 从外到内，从大到小 -->
<div id="container">
    <div id="left">
        <img class="picture" th:src="@{'http://127.0.0.1:8081/product/' +  ${product.picture}}" alt="">
        <div id="pictures-wrapper">
            <img class="pictures" th:each="picture: ${#strings.arraySplit(product.pictures, ',')}"
                 th:src="@{'http://127.0.0.1:8081/product/' +  ${picture}}" alt="">

            <!--            <img class="pictures" src="/static/pictures/product/54b175f0-2670-415f-9c55-c815c40b1c7d.webp" alt="">-->
            <!--            <img class="pictures" src="/static/pictures/product/54b175f0-2670-415f-9c55-c815c40b1c7d.webp" alt="">-->
            <!--            <img class="pictures" src="/static/pictures/product/54b175f0-2670-415f-9c55-c815c40b1c7d.webp" alt="">-->
            <!--            <img class="pictures" src="/static/pictures/product/54b175f0-2670-415f-9c55-c815c40b1c7d.webp" alt="">-->
            <!--            <img class="pictures" src="/static/pictures/product/54b175f0-2670-415f-9c55-c815c40b1c7d.webp" alt="">-->
        </div>

    </div>
    <div id="right" th:src="data">
        <h2 th:text="${product.title}">纽仕兰 新西兰4.0g全脂纯牛奶 250ml*24盒</h2>
        <p th:text="${product.subtitle}">天然草饲牧场，4.0g优质乳蛋白营养牛奶</p>
        <div id="info">
            <span>价格</span>
            <span id="price" th:text="${product.price}">123.45</span>
            <div id="description-wrapper">
                <span id="item-description">描述</span>
                <span id="description" th:text="${product.description}">
                1、贮藏方法：常温保存，开启后需冷藏并于3日内饮用完毕。可能会有少量蛋白质沉淀和乳脂肪上浮，属正常现象，饮用前请摇匀。
                2、注意事项：若包装破损，请勿食用。
                3、网易严选出售的食品，除明确质量问题外均不接受退换货。
                 </span>
                <div class="clear"></div>
            </div>
        </div>
    </div>
    <div id="comment-wrapper">
        <form id="comment_form">
            <textarea name="content" required placeholder="评论内容"></textarea>
            <br>
            <input type="file" name="files" multiple><br>
            <br>
            <input type="submit" value="发布评论">
        </form>
    </div>
    <br>
    <div id="comments_wrapper">
        <!--                <div class="member">-->
        <!--                    <img src="/static/pictures/avatar/u=419545237,3925778887&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto.webp"-->
        <!--                         alt="">-->
        <!--                    <p>张*远</p>-->
<!--                            <div class="comment">-->
<!--                                <p class="title">规格： 250ml...</p>-->
<!--                                <p class="content">超级好喝 仨孩子喝死俩了</p>-->
<!--                                <img src="/static/pictures/product/1ae2d559-4ce0-4cde-a86f-551a58f85bb6.webp" alt="">-->
<!--                                <img src="/static/pictures/product/1f44738d-6fba-490e-866d-6b6ef55339b0.webp" alt="">-->
<!--                                <img src="/static/pictures/product/2f663ce7-6cf7-4466-b3ff-e4a13f557ae0.webp" alt="">-->
<!--                                <img src="/static/pictures/product/5b7f2bce-fca4-449b-a26b-3b9731bcb1a0.webp" alt="">-->
<!--                                <img src="/static/pictures/product/07e98aee-a808-43d2-b22a-f480e0aad4f9.webp" alt="">-->
<!--                                <p class="time">2022-04-20 14:33</p>-->
<!--                            </div>-->
        <!--        </div>-->
    </div>
    <script>
        <!--        const 可以用于声明一个常量，以确保变量的值不会被修改。-->
        // getElementById, 根据指定的 ID 值获取到对应的元素对象，从而对其进行操作或获取其属性值
        const right = document.getElementById('right');
        const commentForm = document.getElementById('comment_form');
        const headers = {'Content-Type': 'multipart/form-data'};
        // 设置请求的头部信息， 头部信息是指HTTP请求中的头部字段，用于描述请求的属性和内容
        // 'Content-Type'（内容类型）: 'multipart/form-data' 是一个键值对 用于在 HTTP 请求中传输带有文件上传的表单数据。
        // 在上传图片 文件时候 通过使用'multipart/form-data' 可以将数据正确的编码并传输到服务器中，以便服务器能解析和处理数据

        const type = {type: 'application/json'};
        //指定请求体的内容是类型为json格式 在发送HTTP请求时 使用它确保服务器能够正确的解析请求体的json数据
        commentForm.addEventListener('submit', event => { // 添加一个事件监听器 submit 表单提交时 监听器会被触发
            event.preventDefault(); // 当表单提交时 表单提会被阻止 然后继续执行一下编写的函数内容

            let formData = new FormData(commentForm);
            let data = Object.fromEntries(formData);
            formData.append('comment', new Blob([JSON.stringify(data)], type));
            //将数据添加到FormData里
            // blob 是一种表示二进制数据的数据类型。 它包含任意地数据类型 常用于处理文件和数据的二进制表示

            axios.post('/comment/create', formData, {headers: headers}).then(res => {
                console.log(res.data); /* 打印 类似于 “sout” 功能*/
                if (res.data) {
                    alert('success');
                } else {
                    alert('sign in first');
                }
            }).catch(err => { /* catch 处理错误*/
                console.error(err);
            });
        })

        let productId = right.getAttribute(date);
        console.log(productId);
        axios.get('/comment/query_comment_member_product' + productId).then(res => {
            console.log(res.data);
            console.log(res.data[0].pictures);
//             for (const comment of res.data) {
//                 let avatar = comment.member.avatar, nickname = comment.member.nickname, title = comment.product.title;
//                 content = comment.product.content, time = comment.time;
//                 let commentHtml = `
//                          <div class="member">
//                     <img src="/static/pictures/avatar/` + avatar + ` "alt="">
//                     <p>` + nickname + `</p>
//                 </div>
//                                      <div class="comment">
//                                 <p class="title">`+ title +`</p>
//                                 <p class="content">`+ content +`</p>
//                                 <img src="/static/pictures/product/1ae2d559-4ce0-4cde-a86f-551a58f85bb6.webp" alt="">
//                                 <p class="time">`+time+`</p>
//                             </div>
//
// `
//             }
        }).catch(err => {
            console.error(err);
        });
    </script>
</div>
</body>
</html>